<template>
  <div class="chat">
    <el-card class="chat-window">
      <div class="chat-header">
        <span>Chat with {{ currentContact.name }}</span>
      </div>
      <div class="chat-body">
        <div class="message" v-for="(message, index) in currentContact.messages" :key="index">
          <div v-if="message.from === currentUser.id" class="message-item right">
            <div class="message-content">{{ message.content }}</div>
          </div>
          <div v-else class="message-item left">
            <div class="message-content">{{ message.content }}</div>
          </div>
        </div>
      </div>
      <div class="chat-footer">
        <el-input v-model="newMessage" placeholder="Type your message here" @keyup.enter="chat"/>
        <el-button class="send-button" type="primary" @click="chat">Send</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      currentUser: {
        id: 1,
        name: localStorage.getItem('nickname'),
      },
      contacts: [
        {
          id: 2,
          name: '多多',
          messages: [
            {from: 2,content: '您好'+localStorage.getItem('nickname')+'，我是智能投顾机器人多多'},
            {from: 2, content: '请问有什么可以帮助您的吗？'}
          ],
        },
      ],
      currentContactIndex: 0,
      newMessage: '',
    };
  },
  computed: {
    currentContact() {
      return this.contacts[this.currentContactIndex];
    },
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === '') {
        return;
      }
      this.currentContact.messages.push({
        from: this.currentUser.id,
        content: this.newMessage.trim(),
      });
      this.newMessage = '';
    },

    // 发送异步请求
    // for test: comment this function
    chat() {
      if (this.newMessage.trim() === '') {
        return;
      }
      console.log(this.newMessage.trim());
      this.currentContact.messages.push({
        from: this.currentUser.id,
        content: this.newMessage.trim()
      })
      //
      axios({
        url: 'http://localhost:5000/advisor/advise',
        method: 'get',
        responseType: 'json',
        timeout: 20000,
        //传入参数
        params: {
          request: this.newMessage.trim(),
          risk: localStorage.getItem('risk')==='high'?'高风险承受能力':localStorage.getItem('risk')==='medium'?'中风险承受能力':'低风险承受能力',
          rate:localStorage.getItem('rate')==='high'?'高收益偏好':localStorage.getItem('rate')==='medium'?'中收益偏好':'低收益偏好',
          time:localStorage.getItem('time')==='high'?'偏向长期投资':localStorage.getItem('time')==='medium'?'偏向中期投资':'偏向短期投资',
          cost:(localStorage.getItem('cost')===50||localStorage.getItem('cost')===100)?'偏向大额投资'
              :(localStorage.getItem('cost')===10||localStorage.getItem('cost')===5)?'偏向中额投资'
                  :'偏向小额投资',
        },

        'Access-Control-Allow-Origin': '*'//解决跨域问题
      })
          .then(response => {
            // console.log(response);
            this.currentContact.messages.push({
              from: 2,
              content: response.data,
            })
            console.log(response.data);
          })
          .catch(error => {
            this.currentContact.messages.push({
              from: 2,
              content: "NetWork Error"
            })
            console.log(error);
          })
    }

  },
};
</script>

<style scoped>
.chat {
  display: flex;
}

.chat-window {
  flex: 1;
  margin-right: 10px;
}

.chat-header {
  background-color: #f0f0f0;
  padding: 10px;
}

.chat-body {
  height: 60vh;
  overflow-y: scroll;
}

.message-item {
  display: block;
  width: fit-content;

}

.right {
  opacity: 70%;
  display: flex;
  justify-content: end;
  width: 100%;
}

.right > .message-content {
  background: #654ea3;
  color: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 5px;
}

.left > .message-content {
  background: #ccc;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 5px;
}


.left {
  display: block;
  text-align: left;
}

.chat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.send-button {
  margin-left: 10px;
}
</style>
